import React, { Component } from 'react'
import './Personal.css'
import { connect } from 'react-redux'
import TabBar from '../../components/TabBar/TabBar'
import {
  NavBar, // 顶部标题
  Result, List, Button,
  Dialog,
  Toast
} from 'antd-mobile'
import { exitLoginAction } from '../../redux/user/actions'

class Personal extends Component {
  state = {
    userInfo: {
      header: '',
      username: '',
      post: '',
      info: '',
      company: '',
      salary: '',
      type: ''
    }
  }
  /* 退出登陆操作 */
  logout = () => {
    Dialog.confirm({
      content: '您是否退出登陆',
      onConfirm: () => {
        // 清除用户数据
        this.props.exitLoginAction()
        this.props.history.push('/login')
      }
    })
  }
  componentDidMount() {
    if (!this.props.userInfo) {
      Toast.show({
        content: '请先登录~',
        icon: 'fail'
      })
      return this.props.history.push('/login')
    }
    this.setState({ userInfo: this.props.userInfo })
  }
  render() {
    const { header, username, post, info, company, salary, type } = this.state.userInfo
    return (
      type ? <div className='personal'>
        <NavBar backArrow={false}>个人中心</NavBar>
        <div>
          <Result
            icon={header ? <img src={header} alt="" /> : ''}//头像
            title={username}//用户名字
            className='user-avatar'
          />
          <div>
            <div className="title">相关信息</div>
            <div className="user-info">
              <p>职位：{post ? post : '待完善'}</p>
              <p>简介：{info ? info : '待完善'}</p>
              {type === 'laoban' ? <p>月薪：{salary ? salary : '待完善'}</p> : null}
              {type === 'laoban' ? <p>公司：{company ? company : '待完善'}</p> : null}
            </div>
          </div>
          <List>
            <Button block color='danger' onClick={this.logout} style={{ marginTop: 0 }}>退出登录</Button>
          </List>
        </div>
        <TabBar index='2' />
      </div> : ''
    )
  }
}
export default connect(
  state => ({ userInfo: state.user }),
  { exitLoginAction }
)(Personal)